"use strict";

exports.__esModule = true;
exports.default = void 0;

var _utils = require("../utils");

var _touch = require("../mixins/touch");

var _event = require("../utils/dom/event");

var _createNamespace = (0, _utils.createNamespace)('slider'),
    createComponent = _createNamespace[0],
    bem = _createNamespace[1];

var _default = createComponent({
    mixins: [_touch.TouchMixin],
    props: {
        disabled: Boolean,
        vertical: Boolean,
        activeColor: String,
        inactiveColor: String,
        min: {
            type: Number,
            default: 0
        },
        max: {
            type: Number,
            default: 100
        },
        step: {
            type: Number,
            default: 1
        },
        value: {
            type: Number,
            default: 0
        },
        barHeight: {
            type: [Number, String],
            default: 2
        }
    },
    data: function data() {
        return {
            dragStatus: ''
        };
    },
    computed: {
        range: function range() {
            return this.max - this.min;
        }
    },
    created: function created() {
        // format initial value
        this.updateValue(this.value);
    },
    mounted: function mounted() {
        this.bindTouchEvent(this.$refs.wrapper);
    },
    methods: {
        onTouchStart: function onTouchStart(event) {
            if (this.disabled) {
                return;
            }

            this.touchStart(event);
            this.startValue = this.format(this.value);
            this.dragStatus = 'start';
        },
        onTouchMove: function onTouchMove(event) {
            if (this.disabled) {
                return;
            }

            if (this.dragStatus === 'start') {
                this.$emit('drag-start');
            }

            (0, _event.preventDefault)(event, true);
            this.touchMove(event);
            this.dragStatus = 'draging';
            var rect = this.$el.getBoundingClientRect();
            var delta = this.vertical ? this.deltaY : this.deltaX;
            var total = this.vertical ? rect.height : rect.width;
            var diff = delta / total * this.range;
            this.newValue = this.startValue + diff;
            this.updateValue(this.newValue);
        },
        onTouchEnd: function onTouchEnd() {
            if (this.disabled) {
                return;
            }

            if (this.dragStatus === 'draging') {
                this.updateValue(this.newValue, true);
                this.$emit('drag-end');
            }

            this.dragStatus = '';
        },
        onClick: function onClick(event) {
            event.stopPropagation();
            if (this.disabled) return;
            var rect = this.$el.getBoundingClientRect();
            var delta = this.vertical ? event.clientY - rect.top : event.clientX - rect.left;
            var total = this.vertical ? rect.height : rect.width;
            var value = delta / total * this.range + this.min;
            this.startValue = this.value;
            this.updateValue(value, true);
        },
        updateValue: function updateValue(value, end) {
            value = this.format(value);

            if (value !== this.value) {
                this.$emit('input', value);
            }

            if (end && value !== this.startValue) {
                this.$emit('change', value);
            }
        },
        format: function format(value) {
            return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
        }
    },
    render: function render() {
        var _barStyle;

        var h = arguments[0];
        var vertical = this.vertical;
        var style = {
            background: this.inactiveColor
        };
        var mainAxis = vertical ? 'height' : 'width';
        var crossAxis = vertical ? 'width' : 'height';
        var barStyle = (_barStyle = {}, _barStyle[mainAxis] = (this.value - this.min) * 100 / this.range + "%", _barStyle[crossAxis] = (0, _utils.addUnit)(this.barHeight), _barStyle.background = this.activeColor, _barStyle);

        if (this.dragStatus) {
            barStyle.transition = 'none';
        }

        return h("div", {
            "style": style,
            "class": bem({
                disabled: this.disabled,
                vertical: vertical
            }),
            "on": {
                "click": this.onClick
            }
        }, [h("div", {
            "class": bem('bar'),
            "style": barStyle
        }, [h("div", {
            "ref": "wrapper",
            "attrs": {
                "role": "slider",
                "tabindex": this.disabled ? -1 : 0,
                "aria-valuemin": this.min,
                "aria-valuenow": this.value,
                "aria-valuemax": this.max,
                "aria-orientation": this.vertical ? 'vertical' : 'horizontal'
            },
            "class": bem('button-wrapper')
        }, [this.slots('button') || h("div", {
            "class": bem('button')
        })])])]);
    }
});

exports.default = _default;